<template>
  <div class="play-page">
    <div
      class="mask"
      :style="{
        backgroundImage: `url(${
          currentSong.al ? currentSong.al.picUrl : currentSong.picUrl
        })`,
      }"
    ></div>

    <PlayPageHeader />

    <PlayPageDisc v-if="showDisc" @click.native="showDisc = false" />

    <PlayPageLyric v-else @click.native="showDisc = true" />
    <PlayPageFooter @update:currentTime="$emit('update:currentTime', $event)" />
  </div>
</template>

<script>
import PlayPageDisc from "./playpage/PlayPageDisc.vue";
import PlayPageFooter from "./playpage/PlayPageFooter.vue";
import PlayPageHeader from "./playpage/PlayPageHeader.vue";
import PlayPageLyric from "./playpage/PlayPageLyric.vue";

import { mapState } from "vuex";
export default {
  components: {
    PlayPageHeader,
    PlayPageDisc,
    PlayPageLyric,
    PlayPageFooter,
  },
  name: "PlayPage",
  data() {
    return {
      showDisc: true,
    };
  },

  computed: mapState(["currentSong"]),
};
</script>

<style lang="less">
.play-page {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;

  .mask {
    transition: all 1s;
    background-repeat: no-repeat;
    background-position: center center;
    filter: blur(15px) brightness(0.5);
    transform: scale(1.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .playpage-disc,
  .playpage-lyric {
    flex: 1;
  }
}
</style>
